@mixin reset {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    outline: none;
    border: 0;
    background: none;
    text-decoration: none;
    color: $brand;
  }

  @mixin defaultStyle {
    font-weight: 500;
    font-size: 0.8em;
    line-height: 1.5;
    text-align: center;
    display: inline-flex;
    @include justify-content(space-around);
    vertical-align: top;
    padding: 0.9em 1.14em;
    border-radius: 2px;
    transition: all $tranitions;
  }

  @mixin disabledStyle {
    &.disabled,
    &[disabled] {
      background: $grey-bg;
      color: $grey-smoke-dark;
      cursor: default;

      &:hover {
        background: $grey-bg;
        color: $grey-smoke-dark;
      }
    }
  }

  .button {
    @include reset;
    @include defaultStyle;
    @include disabledStyle;

    color: #fff;
    background-color: $brand;

    &:hover {
      background-color: $brand-dark !important;
    }

    &:active {
      background-color: $brand;
      box-shadow: inset 0 2px 0 0 $brand-dark;
    }

    + .button {
      margin-left: 0.5em;
    }
  }

  .button--ghost {
    @include reset;
    @include defaultStyle;
    @include disabledStyle;

    background: $grey-light;
    color: $space;

    &:hover {
      background: $grey;
    }

    &:active {
      background-color: $grey-light;
      box-shadow: inset 0 2px 0 0 $grey;
    }

    &.disabled,
    &[disabled] {
      border-color: $grey-bg;
    }
  }

  .button--dark {
    @include reset;
    @include defaultStyle;
    @include disabledStyle;

    background: $space;
    color: #fff;

    &:hover {
      opacity: .7;
    }

    &:active {
      background-color: $grey-light;
      box-shadow: inset 0 2px 0 0 $grey;
    }

    &.disabled,
    &[disabled] {
      border-color: $grey-bg;
    }
  }

  .button--text {
    @include reset;
    @include defaultStyle;
    @include disabledStyle;
    padding: 0;
    font-weight: 600;

    &:hover {
      color: $brand-dark;
    }

    &.disabled,
    &[disabled] {
      background: none;

      &:hover {
        background: none;
      }
    }
  }

  .button--link {
    padding: 0;
    font-weight: 600;
    transition: all $tranitions;
    color: $brand;

    &:hover {
      color: $brand-dark;
    }
  }

  .button--with-arrow {
    position: relative;
    padding-right: 2em;

    &:before {
      content: "";
      display: block;
      border-top: 1px solid $brand;
      width: 1.1em;
      position: absolute;
      top: 0.75em;
      right: 0;
    }

    &:after {
      content: "";
      display: block;
      width: 0.5em;
      height: 0.5em;
      border-right: 1px solid $brand;
      border-bottom: 1px solid $brand;
      transform: rotate(-45deg);
      position: absolute;
      top: 0.5em;
      right: 0;
    }

    &:hover {
      &:before {
        border-top: 1px solid $brand-dark;
      }
      &:after {
        border-right: 1px solid $brand-dark;
        border-bottom: 1px solid $brand-dark;
      }
    }
  }

  .button--blank {
    @include reset;
    @include defaultStyle;
    @include disabledStyle;

    background: #fff;
    color: #030C1A;

    &:hover {
      background-color: #eee;
    }

    &:active {
      box-shadow: inset 0 1px 0 0 $grey-dark;
    }
  }


  .button--icon {
    margin-right: 1em;
  }

  .button--nobreak {
    white-space: nowrap;
  }

  // Button sizes
  .button--full {
    width: 100%;
  }
